<template>
    <a-row>
        <a-row class='mytitle'>
            <router-link :to='{name:"index"}'><a-icon type="arrow-left" style="color:var(--themeColor);margin-right:0.5em" /></router-link>
            {{$t('Disk')}}
        </a-row>

        <NoAuthPage v-showNoAuth="'A4-1'" />

        <a-row style="margin:1em" v-userAuth="'A4-1'">
            <a-card hoverable>
                <div style="margin:0 0 1em 0 ">
                    <!-- <a-tooltip placement='bottom'>
                    <template slot='title'>
                        <span>{{$t('Create')}}</span>
                    </template>
                    <a-button type="primary" icon='file-add' @click="create = true"></a-button>
                    </a-tooltip> -->
                    <!-- <a-tooltip placement='bottom'>
                        <template slot='title'>
                            <span>{{$t('Edit')}}</span>
                        </template>
                        <a-button type='primary' icon='form' @click="openmodal('modify')"></a-button>
                    </a-tooltip> -->
                    <!-- <a-tooltip placement='bottom'>
                        <template slot='title'>
                            <span>{{$t('Delete')}}</span>
                        </template>
                        <a-button type='danger' style="margin-left:1em" icon='close-circle' @click="openmodal('deluser')"></a-button>
                    </a-tooltip> -->
                </div>
                <a-table class="tabstyle" :columns="columns" :dataSource="usedata" size="small" 
                         rowKey="id" :pagination='pagination' :locale="defaultSetting">
                 <!-- :rowSelection='{type:"radio",onSelect:onSelectone}' -->
                    <template slot="pos" slot-scope="pos">
                        <p>
                            <!-- {{pos==0?'face':pos==1 ?'top':pos== 2 ?'left':pos== 3 ?'right':pos== 4 ?'back':pos== 5 ?'bottom':''}} -->
                            {{pos==0?$t('Embedded'): pos==1?$t('Font-panel') : pos==2?$t('Top-panel') : $t('Back-panel')}}
                        </p>
                    </template>
                    <template slot="app" slot-scope="app">
                        <p>
                            {{app==0?$t('System-disk'):app==1 ?$t('Cache-disk'):app== 2 ?$t('Data-disk'):$t('No-active-disk')}}
                        </p>
                    </template>
                    <template slot="type" slot-scope="type">
                        <p>
                            {{type==0?'SSD':type==1 ?'HDD':''}}
                        </p>
                    </template>
                    <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class='custom-filter-dropdown'>
                        <a-input v-ant-ref="c => searchInput = c" :placeholder="$t('Enter')+$t('Search-content')" :value="selectedKeys[0]" @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])" @pressEnter="() => handleSearch(selectedKeys, confirm)" style="width: 188px; margin-bottom: 8px; display: block;" />
                        <a-button type='primary' @click="() => handleSearch(selectedKeys, confirm)" icon="search" size="small" style="width: 90px; margin-right: 8px">{{$t('Search')}}</a-button>
                        <a-button @click="() => handleReset(clearFilters)" size="small" style="width: 90px">{{$t('Reset')}}</a-button>
                    </div>
                    <a-icon slot="filterIcon" slot-scope="filtered" type='search' :style="{ color: filtered ? '#108ee9' : undefined }" />
                    <template slot="customRender" slot-scope="text">
                        <span v-if='searchText'>
                            <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))">
                                <mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" :key="i" class="highlight">{{fragment}}</mark>
                                <template v-else>{{fragment}}</template>
                            </template>
                        </span>
                        <template v-else>{{text}}</template>
                    </template>
                </a-table>
            </a-card>
        </a-row>

        <!-- <a-modal title="新增磁盘配置" v-model="create" @cancel='cancelhandle' width='35%' @ok='subnew' :cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' >
		    <a-form :form='form'>
	            <a-form-item label='设备名' v-bind='formlayout'>
			      	<a-input v-decorator="['name',{
	                    rules:[{required:true,message:'请输入设备名'}]
	                }]" placeholder='请输入设备名'>
	                </a-input>
			    </a-form-item>
                <a-form-item label='类型' v-bind='formlayout'>
			      	<a-select v-decorator="['type',{
	                    rules:[{required:true,message:'请选择类型'}]
	                }]" placeholder='请选择类型'>
                        <a-select-option value='ttt'>ttt</a-select-option>
	                </a-select>
			    </a-form-item>
                <a-form-item label='运用' v-bind='formlayout'>
			      	<a-select v-decorator="['use',{
	                    rules:[{required:true,message:'请选择运用'}]
	                }]" placeholder='请选择运用'>
                        <a-select-option value='use'>use</a-select-option>
	                </a-select>
			    </a-form-item>
                <a-form-item label='位置' v-bind='formlayout'>
			      	<a-input v-decorator="['path',{
	                    rules:[{required:true,message:'请输入位置，例如：（x,y）'}]
	                }]" placeholder='请输入位置，例如：（x,y）'>
	                </a-input>
			    </a-form-item>
                <a-form-item label='主机名' v-bind='formlayout'>
			      	<a-input v-decorator="['hostname',{
	                    rules:[{required:true,message:'请输入主机名'}]
	                }]" placeholder='请输入主机名'>
	                </a-input>
			    </a-form-item>
		    </a-form>
		</a-modal> -->

        <a-modal :title="$t('Edit')" v-model="modify" @cancel='cancelhandle' width='35%' @ok='submodify' :cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
    		<a-spin size="large" style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%" tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
		    <a-form :form='form'>
	            <a-form-item :label="$t('Equipment-name')" v-bind='formlayout'>
			      	<a-input v-decorator="['name',{
	                    initialValue:records.name
	                }]" disabled >
	                </a-input>
			    </a-form-item>
                <a-form-item :label="$t('Type')" v-bind='formlayout'>
			      	<a-select v-decorator="['type',{
	                    initialValue:records.type
	                }]" disabled >
                        <a-select-option value='ttt'>ttt</a-select-option>
	                </a-select>
			    </a-form-item>
                <a-form-item :label="$t('App-Type')" v-bind='formlayout'>
			      	<a-select v-decorator="['app',{
	                    initialValue:records.app
	                }]" disabled >
                        <a-select-option value='app'>use</a-select-option>
	                </a-select>
			    </a-form-item>
                <a-form-item :label="$t('Position')" v-bind='formlayout'>
			      	<!-- <a-input v-decorator="['location_x',{
	                    rules:[{required:true,message:'请输入机箱方位'}],initialValue:records.location_x
	                }]">
	                </a-input> -->
                    <a-select v-decorator="['pos',{
                            rules:[{required:true,message:$t('Choose') + $t('Position')}],initialValue:records.pos
                        }]"
                    >
                        <a-select-option :value="item.value" :key="index" v-for="(item,index) in views">{{item.label}}</a-select-option>
                    </a-select>
			    </a-form-item>
                <a-form-item :label="$t('Slot')" v-bind='formlayout'>
			      	<a-input v-decorator="['slot',{
	                    rules:[{required:true,message:$t('Enter') + $t('Slot')}],initialValue:records.slot
	                }]" disabled>
	                </a-input>
			    </a-form-item>
                <a-form-item :label="$t('Machine')+'ID'" v-bind='formlayout'>
			      	<a-input v-decorator="['hostname',{
	                    initialValue:records.hostname
	                }]" disabled >
	                </a-input>
			    </a-form-item>
		    </a-form>
		</a-modal>
    </a-row>
</template>
<script>
import EmptyData from '@/components/common/EmptyData'
import NoAuthPage from '@/components/common/NoAuthPage'

import request from '@/request/request'

export default {
    name:'',
    components: { EmptyData, NoAuthPage },
    data(){
        return{
            searchText: '',
            searchInput: null,
            columns:[
                {
                    title:this.$t('Equipment-name'),dataIndex:'name',key:'name',
                    sorter: (a, b) => {if(a.name < b.name) return -1; else return 1},
                    scopedSlots: {
                        filterDropdown: 'filterDropdown',
                        filterIcon: 'filterIcon',
                        customRender: 'customRender',
                    },
                    onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
                    onFilterDropdownVisibleChange: visible => {
                        if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        }, 0);
                        }
                    },
                },
                {title:this.$t('Type'),dataIndex:'type',key:'type',scopedSlots:{customRender:'type'}},
                {title:this.$t('App-Type'),dataIndex:'app',key:'app',scopedSlots:{customRender:'app'}},
                // {title:this.$t('Position'),dataIndex:'pos',key:'pos',scopedSlots:{customRender:'pos'}},
                {title:this.$t('Panel'),dataIndex:'panel',key:'panel',scopedSlots:{customRender:'pos'}},
                {title:this.$t('Slot'),dataIndex:'slot',key:'slot'},
                {title:this.$t('Host')+' ID',dataIndex:'hostname',key:'hostname'}
                // {title:this.$t('Host')+' ID',dataIndex:'machine_id',key:'machine_id'}
            ],
            selectedRowKeys:[],
            form:this.$form.createForm(this),
            pagination:{
                defaultPageSize:10,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger:true,
                pageSizeOptions: ['10', '15', '20'],
                onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            formlayout:{
                labelCol:{span:6},
                wrapperCol:{span:16}
            },
            views: [
                {label: 'inner', value: 0},
                {label: 'face', value: 1},
                {label: 'top', value: 2},
                // {label:'left',value:2},
                // {label:'right',value:3},
                {label: 'back', value: 3},
                // {label:'bottom',value:5},
            ],
            usedata:[],
            create:false,
            modify:false,
            records:'',
            ids:'',
            spinning:false,
            defaultSetting: {emptyText:<EmptyData />}
        }
    },
    computed:{
        getlanguage(){
            return this.$store.state.language
        }
    },
    watch: {
        getlanguage(val){  //监听语言切换，切换data组件内的多语言
            this.columns = [
                {
                    title:this.$t('Equipment-name'),dataIndex:'name',key:'name',
                    sorter: (a, b) => {if(a.name < b.name) return -1; else return 1},
                    scopedSlots: {
                        filterDropdown: 'filterDropdown',
                        filterIcon: 'filterIcon',
                        customRender: 'customRender',
                    },
                    onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
                    onFilterDropdownVisibleChange: visible => {
                        if (visible) {
                            setTimeout(() => {
                                this.searchInput.focus();
                            }, 0);
                        }
                    },
                },
                {title:this.$t('Type'),dataIndex:'type',key:'type',scopedSlots:{customRender:'type'}},
                {title:this.$t('App-Type'),dataIndex:'app',key:'app',scopedSlots:{customRender:'app'}},
                // {title:this.$t('Position'),dataIndex:'pos',key:'pos',scopedSlots:{customRender:'pos'}},
                {title:this.$t('Position'),dataIndex:'panel',key:'panel',scopedSlots:{customRender:'pos'}},
                {title:this.$t('Slot'),dataIndex:'slot',key:'slot'},
                {title:this.$t('Host')+' ID',dataIndex:'hostname',key:'hostname'}
                // {title:this.$t('Host')+' ID',dataIndex:'machine_id',key:'machine_id'}
            ]
        }
    },
    methods:{
        getdata(){
            request('get', 'ops/conf/db/disk').then(res=>{
                // console.log('获取磁盘信息列表', res)
                if(res.data.flag == 1) {
					this.model(res.data.id) //返回模板
					this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
				}else {
                    this.usedata = res.data
                    if(this.records !== ''){
                        this.records = res.data[this.ids]
                    }
                }
            })
        },
        onSelectone(record, selected, selectedRows){
            this.records = record  //选中的一条信息
            for (const item of this.usedata) {
                if(this.records == item)
                this.ids = i
            }
        },
        submodify(e){
            e.preventDefault();
            this.form.validateFields((err,value)=>{
            if(!err){
                    this.spinning = true
                    request('put', 'ops/conf/db/disk',{
                        id:this.records.id,
                        pos:value.pos,
                        slot:value.slot
                    }).then(res=>{
                        this.modify=false
                        this.spinning = false
                        this.getdata()
                        this.form.resetFields();
                    })
                }
            
            })
        },
        cancelhandle(e){
            this.create=false
            this.modify=false
            this.spinning=false
            this.form.resetFields();
        },
        openmodal(name){
            if(this.records !== ''){
                if(name=='deluser'){
                    this.deluser()
                }else if(name == 'modify'){
                    this.modify = true
                }

            }
            else{
                this.$notification['error']({
                    message: this.$t('Choose')+this.$t('Operating-object')
                })
            }
            
        },
        deluser(){
            let _this = this
            this.$confirm({
                title: this.$t('Delete'),
                content: this.$t('Sure-to-del') +this.records.name+' ？',
                cancelText:this.$t('Cancel'),
                okText:this.$t('Sure'),
                okType:'danger',
                onOk(){
                    request('DELETE', 'ops/conf/db/disk',{
                        // data:{
                            id:_this.records.id
                        // }
                    }).then(res=>{
                        _this.model(res.data.id) //返回模板
                        _this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                        _this.getdata();
                    })
                },
                onCancel(){
                }
            })
        },
        // 搜索
        handleSearch(selectedKeys, confirm) {
            confirm()
            this.searchText = selectedKeys[0]
        },

        handleReset(clearFilters) {
            clearFilters()
            this.searchText = ''
        },
    },
    mounted(){
        this.getdata()
    }
}
</script>